<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		postTableData
	} from "@/api/table";

	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;

	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const editorConfig = {
		placeholder: "请输入内容...",
	};
	const mode = ref("default");
	const mode1 = ref("default");


	// 加载html
	const initHtml = () => {
		searchDataQbxx({
			m: "能力现状-通信系统建设情况"
		}).then((res) => {
			const {
				data
			} = res;
			valueHtml.value = data.find((x) => x.k === "通信手段和装备现状")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "可用资源重要目标单位现状")?.v || "";
		});
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"各级各类指挥所(含地面指挥中心)北斗导航定位系统的个、国家党政专网的 10个、电话终端的 23 个、超短波数字群的1个、接入人防光缆专网的1个、便捷指挥信息系统的个、民用互联网的3个、卫星地面站的10个、配备指挥信息统的 12个、超短波数字集群车载站的1个、车载指挥信息系的2个、125 瓦短波电台车载站的5个、4G/5G专网的12个:星车载站的1个、空情接收处理自动化系统的15 个、125 瓦波电台的 14个。具体情况如下:"
	);

	const valueHtml1 = ref(
		"空袭警报以固定警报器材为主，以车载、便携、手摇等警报器材为辅，利用户内户外和广播电视、多媒体、信息等手段并用及时发布空情信息。"
	);


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "能力现状-通信系统建设情况",
					data: [{
						k: "通信手段和装备现状",
						v: valueHtml.value,
					}, {
						k: "可用资源重要目标单位现状",
						v: valueHtml1.value,
					}],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});

	}


	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		if (!editor) return;
		if (!editor1) return;
		editor.destroy();
		editor1.destroy();
	});

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};

	const tableData1 = ref([])
	const tableData2 = ref([])

	const getList1 = () => {
		return postTableData({
			docType: "intelligence",
			method: "tongxinjianshexianzhuang",
		}).then(result => {
			if (result.code === 200) {
				tableData1.value = result?.data || []
			}
		})
	}
	const getList2 = () => {
		return postTableData({
			docType: "intelligence",
			method: "tongxinkeyongziyuan",
		}).then(result => {
			if (result.code === 200) {
				tableData2.value = result?.data || []
			}
		})
	}
	onMounted(async () => {
		await initHtml();
		await getList1()
		await getList2()
	});
</script>
<template>
	<div class="">

		<FirstTitle name="通信手段和装备现状" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>



		<FirstTitle name="通信系统建设现状" class="top-15" />
		<!-- <div class="top-15">
			各级各类指挥机构（含地面指挥中心）接入人防光缆专网XX个、民用互联网XX个，装备125瓦短波电台XX个、150w短波电台XX个、125瓦短波电台车载站XX个、卫星地面站XX个、卫星车载站XX个、北斗导航定位系统XX个、超短波数字集群XX个、超短波数字集群车载站XX个，空情接收处理自动化系统XX个、电话终端XX个、4G/5G专网XX个。具体情况如下：
		</div> -->
		<div class="text-center top-15">{{city}}通信系统建设现状统计表</div>
		<el-table id="table" :data="tableData1" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="60" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="name" label="指挥所名称" />
			<el-table-column prop="nationalDefenseNetwork" label="国防动员信息网" />
			<el-table-column prop="partyGovernmentNetwork" label="国家党政专网" />
			<el-table-column prop="civilInternet" label="民用互联网" />
			<el-table-column prop="shortwaveRadio125w" label="125瓦短波电台" />
			<el-table-column prop="shortwaveRadioVehicle125w" label="125瓦短波电台车载站" />
			<el-table-column prop="satelliteGroundStation" label="卫星地面站" />
			<el-table-column prop="satelliteVehicleStation" label="卫星车载站" />
			<el-table-column prop="beidouNavigation" label="北斗导航定位系统" />
			<el-table-column prop="commandInfoSystem" label="指挥信息系统" />
			<el-table-column prop="airSituationWarningSystem" label="空情预警信息系统" />
			<el-table-column prop="convenientCommandSystem" label="便捷指挥信息系统" />
			<el-table-column prop="wiredTelephoneNetwork" label="有线电话网" />
			<el-table-column prop="uhfDigitalTrunking" label="超短波数字集群" />
			<el-table-column prop="uhfDigitalTrunkingVehicle" label="超短波数字集群车载站" />
			<el-table-column prop="fourFiveGNetwork" label="4G/5G专网" />
			<el-table-column prop="vehicleCommandInfoSystem" label="车载指挥信息系统" />
		</el-table>






		<FirstTitle name="可用资源现状" class="top-15" />


		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>

		<!-- <div class="text-center top-15">{{city}}通信系统可用资源统计表</div>
		<el-table id="table" :data="tableData2" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>

			<el-table-column prop="rowNum" label="序号" width="60" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="name" label="指挥所名称" />
			<el-table-column prop="nationalDefenseNetwork" label="国防动员信息网" />
			<el-table-column prop="partyGovernmentNetwork" label="国家党政专网" />
			<el-table-column prop="civilInternet" label="民用互联网" />
			<el-table-column prop="shortwaveRadio125w" label="125瓦短波电台" />
			<el-table-column prop="shortwaveRadioVehicle125w" label="125瓦短波电台车载站" />
			<el-table-column prop="satelliteGroundStation" label="卫星地面站" />
			<el-table-column prop="satelliteVehicleStation" label="卫星车载站" />
			<el-table-column prop="beidouNavigation" label="北斗导航定位系统" />
			<el-table-column prop="commandInfoSystem" label="指挥信息系统" />
			<el-table-column prop="airSituationWarningSystem" label="空情预警信息系统" />
			<el-table-column prop="convenientCommandSystem" label="便捷指挥信息系统" />
			<el-table-column prop="wiredTelephoneNetwork" label="有线电话网" />
			<el-table-column prop="uhfDigitalTrunking" label="超短波数字集群" />
			<el-table-column prop="uhfDigitalTrunkingVehicle" label="超短波数字集群车载站" />
			<el-table-column prop="fourFiveGNetwork" label="4G/5G专网" />
			<el-table-column prop="vehicleCommandInfoSystem" label="车载指挥信息系统" />

		</el-table> -->


		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>